<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/src/bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <!-- <link ref="stylesheet" type="text/css" href="/src/css/makeBulkOrder.css"> -->
    <link rel="stylesheet" type="text/css" href="/src/css/main.css">
<style>
    .wrapper .container {
    background-color: #fff;
    padding: 10px;
}

.wrapper .container .breadcrumb {
    margin-top: 10px;
}

.wrapper .container .tab-pane {
    padding-top: 10px;
}

.wrapper .container .tab-pane ul {
    margin-left: 10px;
}

.wrapper .container .tab-pane ul li {
    display: inline-block;
    margin-left: 10px;

}

.wrapper .container .selected-list-group input {
    width: 80px;
    text-align: center;
}

.wrapper .container .chima-list {
    /* border: 1px solid #ccc; */
    width: 350px;
    height: 45px;
    line-height: 45px;
    margin-top: 10px;
    padding-left: 15px;
}

.wrapper .container .selected-list-group .chima-group {
    display: inline-block;
    width: 120px;
    background-color: #FF5722;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #fff;
    /* font-size: 18px;
    font-weight: 700; */
}

.wrapper .container .count-op {
    position: relative;
    top: -46px;
    left: 160px;
}

.count-op li {
    display: inline-block;
}

.remove-op {
    position: relative;
    top: -91px;
    left: 285px;
}

.chima-pane {
    background-color: #f5f5f5;
    padding: 20px;
}

.add-choose {
    position: relative;
    left: 100px;
}
.chooseTmp{
    margin-left: 10px;
}
</style>
</head>
<body>  
        <div class="wrapper" id="makeBulkOrderVue">
                <embed class="embed-wrapper" src="../top.html">
                <div class="content-wrapper container">
                    <ol class="breadcrumb">
                        <li><a href="/addOrder">选择服装分类</a></li>
                        <li><a href="#">选择物料</a></li>
                        <li><a href="#">确认模板</a></li>
                        <li class="active">批量填写订单</li>
                    </ol>
                    <div class="page-header">
                        <h2> 添加批量订单</h2>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">女装-衬衫</div>
                        <div class="panel-body">
                            <button type="button" class="btn btn-default btn-xs" v-if="showAdd" @click="toggleClick()">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            </button>
                            <div>
        
                                <!-- 选择尺码 -->
                                <ul class="nav nav-tabs" id="myTabs" role="tablist" v-if="showFlag1">
                                    <li role="presentation" class="active" @click="clearSelectList()"><a href="#china"
                                            aria-controls="home" role="tab" data-toggle="tab">中国尺码</a></li>
                                    <li role="presentation" @click="clearSelectList()"><a href="#oumei" aria-controls="profile"
                                            role="tab" data-toggle="tab">欧美尺码</a></li>
        
                                </ul>
        
                                <!-- Tab panes -->
                                <div class="tab-content" v-if="showFlag1">
                                    <div role="tabpanel" class="tab-pane active" id="china">
                                        <div class="chima-pane">
                                            <ul>
                                                <li class="item-title"><span class="label label-success">身高：</span></li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseH(145)">145</button>
                                                </li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseH(150)">150</button>
                                                </li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseH(155)">155</button>
                                                </li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseH(160)">160</button>
                                                </li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseH(165)">165</button>
                                                </li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseH(270)">170</button>
                                                </li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseH(175)">175</button>
                                                </li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseH(180)">180</button>
                                                </li>
                                            </ul>
                                            <ul>
                                                <li class="item-title"><span class="label label-success">胸围：</span></li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseX(71)">71</button></li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseX(76)">76</button></li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseX(80)">80</button></li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseX(84)">84</button></li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseX(88)">88</button></li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseX(92)">92</button></li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseX(96)">96</button></li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseX(100)">100</button>
                                                </li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseX(104)">104</button>
                                                </li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseX(108)">108</button>
                                                </li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseX(112)">112</button>
                                                </li>
                                            </ul>
                                            <ul>
                                                <li class="item-title"><span class="label label-success">体型：</span></li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseT('A')">A</button></li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseT('B')">B</button></li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseT('C')">C</button></li>
                                                <li class="item-data"><button class="btn btn-default"
                                                        @click="chooseT('D')">D</button></li>
        
                                            </ul>
                                            <span class="chooseTmp" v-if="chooseHFlag == true">身高：{{selectH}}</span>
                                            <span class="chooseTmp" v-if="chooseXFlag== true">胸围：{{selectX}}</span>
                                            <span class="chooseTmp" v-if="chooseTFlag== true">体重：{{selectT}}</span>
                                            <button  v-if="chooseHFlag&&chooseXFlag&&chooseTFlag == true" class="btn btn-info chooseTmp" @click="confirmAdd(1)">确认</button>
                                        </div>
                                        <div class="alert alert-danger" role="alert" v-if="alertFlag">
                                                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                                                <span class="sr-only">Error:</span>
                                                请选择身高、胸围、体型
                                            </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="oumei">
                                        <ul>
                                            <li class="item-title"><span class="label label-success" >尺码：</span></li>
                                            <li class="item-data"><button class="btn btn-default" @click="addN('XS')">XS</button></li>
                                            <li class="item-data"><button class="btn btn-default" @click="addN('S')">S</button></li>
                                            <li class="item-data"><button class="btn btn-default" @click="addN('M')">M</button></li>
                                            <li class="item-data"><button class="btn btn-default" @click="addN('L')">L</button></li>
                                            <li class="item-data"><button class="btn btn-default" @click="addN('XL')">XL</button></li>
                                            <li class="item-data"><button class="btn btn-default" @click="addN('XXL')">XXL</button></li>
                                            <li class="item-data"><button class="btn btn-default" @click="addN('XXXL')">XXXL</button></li>
                                            <li class="item-data"><button class="btn btn-default" @click="addN('4XL')">4XL</button></li>
                                            <li class="item-data"><button class="btn btn-default" @click="addN('5XL')">5XL</button></li>
                                            <li class="item-data"><button class="btn btn-default" @click="addN('6XL')">6XL</button></li>
                                        </ul>
                                        <button class="btn btn-info add-choose" @click="confirmAdd(2)">添加</button>
                                        
                                    </div>
                                    <div class="">
                                        <!-- 选中的项 -->
                                        <ul class="selected-list-group" id="selectedList">
                                            <li v-for="(item,index) in  chimaList" class="chima-list">
                                                <span v-if="item['type']==1" class="chima-group">
                                                    {{item['H']}}/{{item['X']}}/{{item['T']}}
                                                </span>
                                                <span v-if="item['type']==2" class="chima-group">
                                                        {{item['N']}}
                                                    </span>
                                                <ul class="count-op">
                                                    <li>
                                                        <span class="glyphicon glyphicon-minus" aria-hidden="true"
                                                            @click="item['count']-=1">
                                                        </span>                                                        
                                                    </li>
                                                    <li>
                                                            <input type="text" class="form-control" style="width: 70px;" placeholder="Username" aria-describedby="basic-addon1" v-model="item['count']">
                                                    </li>
                                                    <li><span class="glyphicon glyphicon-plus" aria-hidden="true"
                                                            @click="item['count']+=1"></span>
                                                    </li>
                                                </ul>
                                                <!-- 移除选中的尺码组合 -->
                                                <div class="remove-op">
                                                    <button type="button" class="btn btn-default btn-xs"
                                                        @click="reomveChooseChima(item,index)">
                                                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 移除
                                                    </button>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
        
                            </div>
                        </div>
                    </div>
<!--         
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">男装-西裤</h3>
                        </div>
                        <div class="panel-body">
                            <button type="button" class="btn btn-default btn-xs">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">男装-西裤</h3>
                        </div>
                        <div class="panel-body">
                            <button type="button" class="btn btn-default btn-xs">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div> -->
                    <div>
                        <button class="btn btn-success">获得样衣和批量报价</button>
                    </div>
                </div>
               <!-- <embed src="/src/html/footer.html"> -->
            </div>
    
</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript" src="/src/js/jquery.min.2.1.4.js"></script>
<script src="/src/bootstrap-3.3.7-dist//js/bootstrap.min.js"></script>
<script>
    var makeBulkOrderVue = new Vue({
        el:'#makeBulkOrderVue',
        data:function() {
            return {
                // wclose: {
                showFlag1: false,
                showAdd: true,
                selectH: '',//身高
                selectX: '',//胸围
                selectT: '',//体型
                selectN:'',//尺码：S,M,L,....
                // 里面存放已经选择的尺码数据对象
                selected: {},
                chimaList: [],//对象数组：身高、胸围、体型
                alertFlag: false,
                chooseHFlag:false,//是否一选择身高
                chooseXFlag:false,//是否已选择胸围
                chooseTFlag:false,//是否已选择体型                
            }
        },
        
        methods: {
            toggleClick: function () {
                // debugger;
                this.showAdd = !this.showAdd;
                if (!this.showAdd) {
                    this.showFlag1 = true;
                    // alert()
                }
            },
            chooseH: function (val) {
                this.selectH = val;
                this.chooseHFlag = true;
            },
            chooseX: function (val) {
                this.selectX = val;
                this.chooseXFlag = true;
            },
            chooseT: function (val) {
                this.selectT = val;
                this.chooseTFlag = true;
            },
            addN:function(val){
                this.selectN = val;
            },
            confirmAdd: function (type) {
                // 1:中国尺码；2:欧美尺码
                if (type === 1) {
                    if (this.selectH && this.selectX && this.selectT) {
                        this.selected = {
                            'H': this.selectH,
                            'X': this.selectX,
                            'T': this.selectT,
                            'count':1,//数量默认是1
                            'type':1
                        };
                        this.chimaList.push(this.selected);
                        this.alertFlag = false;
                        // 清空
                        this.selectH = '';
                        this.selectX = '';
                        this.selectT = '';
                    } else {
                        this.alertFlag = true;
                    }
                }else{
                    if(this.selectN){
                        this.selected = {
                            'N': this.selectN,
                            'type':2,
                            'count':1,////数量默认是1
                        };
                        this.chimaList.push(this.selected); 
                        this.alertFlag = false;
                        this.selectN = '';
                    }else{
                         this.alertFlag = true;
                    }
                   
                }


            },
            // 移除选中的尺码组合
            reomveChooseChima: function (item, index) {
                this.chimaList.splice(index, 1);
            },
            clearSelectList: function () {

                this.chimaList = [];
            }
        },
      
       

    })

</script>

</html>